<template>
    <div :id="props.id" class="chartPane">

    </div>
</template>

<script setup>
import * as echarts from "echarts";

const props = defineProps({
    chartOption: {
        type: Object,
        default: () => ({})
    },
    id: {
        type: String,
        default: () => {
            return new Date().getTime().toString()
        }
    }
})

watch(() => props.chartOption, (newV) => {
    chartIns.setOption(newV)
}, {
    deep: true
})

function chartSetOption(item) {
    chartIns.setOption(item)
}

let chartIns = null
function initChart() {
    chartIns = echarts.init(document.getElementById(props.id))
    chartIns.setOption(props.chartOption)
    window.addEventListener("resize", chartResize)
}
function chartResize() {
    if (chartIns) {
        setTimeout(() => {
            nextTick(() => {
                chartIns.resize()
            })
        }, 300)
    }
}
onMounted(() => {
    initChart()
})
defineExpose({
    chartSetOption
})
onUnmounted(() => {
    chartIns.dispose()
    chartIns.null
    window.removeEventListener("resize", chartResize)
})

</script>

<style lang="scss" scoped>
.chartPane {
    height: 100%;
    width: 100%;
}
</style>